<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'

import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

const time1 = ref('')
const time2 = ref('')

const today = new Date();
time1.value = today.toISOString().split('T')[0];
time2.value = today.toISOString().split('T')[0];


let barChart = null;
let pieChart = null;
let NpieChart = null;
let areaLineChart = null;

//按月份查看
function initareaLineChart(){
    areaLineChart = echarts.init(document.getElementById('digiAreaLineChart'));
    let option: EChartsOption;
    option = {
        title:{
            text:'按月份查看（万吨）',
            textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: 'bold',
                lineHeight: 20,
            }
        },
        tooltip: {
            show:true,
            trigger:'axis'
        },
        grid: {
            left: '1%',
            top: '50px',
            right: '0%',
            bottom: '18%',
            containLabel:true
        },
        legend: {
            top:'8px',
            left:'right',
            padding:0,
            textStyle:{
                color:'#8EC6D8'
            },
            icon:'circle'
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
                color: 'rgba(222, 235, 255, 0.7)'
            },
            axisTick: {
                show: false
            },
            data: JinhaocunMonthData.value.monthData
        },
        yAxis: {
            type: 'value',
            nameTextStyle: {
                color: 'rgba(222, 235, 255, 0.7)',
                align: 'right'
            },
            axisLabel: {
                color: 'rgba(222, 235, 255, 0.7)'
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: ['rgba(222, 235, 255, 0.1)']
                }
            }
        },
        series: [
            {
                name: '库存',
                data: JinhaocunMonthData.value.kucunData,
                type: 'line',
                showSymbol: false,
                emphasis: {
                    itemStyle: {
                        color: 'rgba(255, 201, 106, 1)', // 鼠标悬停时的数据点颜色
                        borderColor: '#fff', // 鼠标悬停时的数据点边框颜色
                        borderWidth: 2, // 鼠标悬停时的数据点边框宽度
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(1, 100, 255, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(1, 100, 255, 0)'
                        }
                    ])
                }
            },
            {
                name: '进煤量',
                data: JinhaocunMonthData.value.jinmeiData,
                type: 'line',
                showSymbol: false,
                emphasis: {
                    itemStyle: {
                        color: 'rgba(255, 201, 106, 1)', // 鼠标悬停时的数据点颜色
                        borderColor: '#fff', // 鼠标悬停时的数据点边框颜色
                        borderWidth: 2, // 鼠标悬停时的数据点边框宽度
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(68, 240, 233, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(68, 240, 233, 0)'
                        }
                    ])
                }
            },
            {
                name: '耗煤量',
                data: JinhaocunMonthData.value.haomeiData,
                type: 'line',
                showSymbol: false,
                emphasis: {
                    itemStyle: {
                        color: 'rgba(255, 201, 106, 1)', // 鼠标悬停时的数据点颜色
                        borderColor: '#fff', // 鼠标悬停时的数据点边框颜色
                        borderWidth: 2, // 鼠标悬停时的数据点边框宽度
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(234, 186, 84, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(234, 186, 84, 0)'
                        }
                    ])
                }
            }
        ]
    }
    option && areaLineChart.setOption(option);
}

//按煤场查看
function initNpieChart(){
    NpieChart = echarts.init(document.getElementById('digiNpieChart'));
    let option: EChartsOption;
    option = {
        color:['#0164FF','#47EEB5','#EABA54'],
        grid:{
            top:0,
            left:0,
            right:0,
            bottom:0
        },
        legend: {
            bottom:'30px',
            left:'center',
            itemHeight: 10,
            textStyle:{
                color:'#8EC6D8'
            }
        },
        series: [
            {
                type: 'pie',
                center: ['30%', '45%'],
                radius: '50%',
                roseType: 'radius',
                clockwise:false,
                label: {
                    show: false,
                    color:'#fff',
                    formatter: '{b}\n{c}',
                },
                labelLine:{
                    length:5
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                data: [
                    { value: JinhaocunDateData.value.kucunData[0], name: '库存' },
                    { value: JinhaocunDateData.value.jinmeiData[0], name: '进煤量' },
                    { value: JinhaocunDateData.value.haomeiData[0], name: '耗煤量' },
                ]
            },
            {
                type: 'pie',
                center: ['70%', '45%'],
                radius: '50%',
                roseType: 'radius',
                clockwise:false,
                label: {
                    show: false,
                    formatter: '{b}\n{c}',
                    color:'#fff',
                },
                labelLine:{
                    length:5
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                data: [
                { value: JinhaocunDateData.value.kucunData[1], name: '库存' },
                    { value: JinhaocunDateData.value.jinmeiData[1], name: '进煤量' },
                    { value: JinhaocunDateData.value.haomeiData[1], name: '耗煤量' },
                ]
            }
        ]
    }
    option && NpieChart.setOption(option);
}


// 按煤种查看
function initBarChart(){
    barChart = echarts.init(document.getElementById('diaiBarChart'));
    let option: EChartsOption;
    option = {
        color:['#02CDFF','#0090FF','#678ACB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            top:'bottom',
            left:'center',
            itemHeight: 10,
            textStyle:{
                color:'#8EC6D8'
            }
        },
        grid: {
            top: '5%',
            left: '0%',
            right: '4%',
            bottom: '8%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                color: '#B5C5D4'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#666'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: JinhaocunTypeData.value.bunkerData,
            axisLabel: {
                color: '#D6E7FF'
            },
        },
        series: [
            {
                name: '库存',
                type: 'bar',
                data: JinhaocunTypeData.value.kucunData
            },
            {
                name: '进煤量',
                type: 'bar',
                data: JinhaocunTypeData.value.jinmeiData
            },
            {
                name: '耗煤量',
                type: 'bar',
                data: JinhaocunTypeData.value.haomeiData
            },
        ]
    }
    option && barChart.setOption(option);
}

// 设备状态
function initPieChart(){
    pieChart = echarts.init(document.getElementById('digiPieChart'));
    let option: EChartsOption;
    option = {
        color:['#0164FF','#E73512','#EABA54'],
        title:{
            top:'-5px',
            text:'输煤程控设备状态',
            textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: 'bold',
                lineHeight: 20,
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 'center',
            right:'15%',
            orient: 'vertical',
            textStyle: {
                color: '#B0CCF3',
                fontSize: 14
            },
            itemGap:18,
            icon:'circle'
        },
        series: [
            {
            type: 'pie',
            center: ['35%', '55%'],
            radius: ['40%', '60%'],
            label: {
                show: false
            },
            data: [
                { value: deviceStatusData.value.workingCount, name: '正常' },
                { value: deviceStatusData.value.warningCount, name: '报警' },
                { value: deviceStatusData.value.downCount, name: '停机' }
            ]
            }
        ]
    }
    option && pieChart.setOption(option);
}

import { JinhaocunByMonth, JinhaocunByDate, JinhaocunByBunkerType, deviceStatus, warningsHowMany,DeviceWarnInfoStatus,bunkersInfo } from "@/api";

// 按月查看进存情况
const JinhaocunMonthData = ref<any>({})
const getJinhaocunByMonth = () => {
    JinhaocunByMonth().then((res:any)=>{
        console.log('按月查看进存情况----',res.data)
        JinhaocunMonthData.value = res.data
        initareaLineChart()
    })
}

// 按煤场查看
const JinhaocunDateData = ref<any>({})
const getJinhaocunByDate = () => {
    JinhaocunByDate(time1.value).then((res:any)=>{
        console.log('按煤场查看----',res.data)
        JinhaocunDateData.value = res.data
        initNpieChart()
    })
}

// 按煤种查看
const JinhaocunTypeData = ref<any>({})
const getJinhaocunByBunkerType = () => {
    JinhaocunByBunkerType(time2.value).then((res:any)=>{
        console.log('按煤种查看----',res.data)
        JinhaocunTypeData.value = res.data
        initBarChart()
    })
}

const changeTime1 = () => {
    getJinhaocunByDate()
}
const changeTime2 = () => {
    getJinhaocunByBunkerType()
}

// 煤场信息
const bunkersData = ref<any>({})
const getBunkersInfo = () => {
    bunkersInfo().then((res:any)=>{
        console.log('煤场信息----',res.data)
        bunkersData.value = res.data
    })
}

// 设备状态
const deviceStatusData = ref<any>({})
const getDeviceStatus = () => {
    deviceStatus().then((res:any)=>{
        console.log('设备状态----',res.data)
        deviceStatusData.value = res.data
        initPieChart()
    })
}

// 预警情况
const warningsData = ref<any>({})
const getWarningsHowMany = () => {
    warningsHowMany().then((res:any)=>{
        console.log('预警情况----',res.data.devices)
        warningsData.value = res.data.devices

    })
}

// 更新--预警情况
const handleDialogVisible = ref(false)
const addForm = ref({
    status: '',
    remark:'',
})

const sId = ref('')
const submitStatus = () => {
    if(!addForm.value.status){
        ElMessage.error('请选择处理结果')
        return
    }
    DeviceWarnInfoStatus({
        id: sId.value,
        status: Number(addForm.value.status),
        remark: addForm.value.remark
    }).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '处理成功',
            })
            handleDialogVisible.value = false
            getWarningsHowMany()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 忽略
const ignore = (id:any) => {
    DeviceWarnInfoStatus({
        id: id,
        status: 2
    }).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '已忽略',
            })
            getWarningsHowMany()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}





onMounted(() => {
    getBunkersInfo()
    getJinhaocunByMonth()
    getJinhaocunByDate()
    getJinhaocunByBunkerType()
    
    getDeviceStatus()
    getWarningsHowMany()

});

</script>
<template>
    <!-- 弹出框/处理 -->
    <el-dialog v-model="handleDialogVisible" title="处理" width="500" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="auto">
                <el-form-item label="处理结果:">
                    <el-select v-model="addForm.status" placeholder="请选择">
                        <el-option label="未解决" value="3" />
                        <el-option label="已解决" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注:" style="width: 92%;">
                    <el-input v-model="addForm.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="submitStatus">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="alarm_flex_bg">
        <div class="alarm_flex">
            <div class="alarm_flex_left">
                <div class="alarm_box_bg">
                    <div class="alarm_title">
                        进耗存情况
                    </div>
                    <div class="" id="digiAreaLineChart" style="width: 100%;height: 287px;"></div>
                    <div class="digi_title">
                        <h3>按煤场查看</h3>
                        <el-date-picker
                            v-model="time1"
                            type="date"
                            placeholder="请选择日期"
                            value-format="YYYY-MM-DD"
                            style="width: 160px;"
                            :editable="false"
                            :clearable="false"
                            @change="changeTime1"
                        />
                    </div>
                    <div class="" id="digiNpieChart" style="width: 100%;height: 250px;"></div>

                    <div class="digi_title">
                        <h3>按煤种查看</h3>
                        <el-date-picker
                            v-model="time2"
                            type="date"
                            placeholder="请选择日期"
                            value-format="YYYY-MM-DD"
                            style="width: 160px;"
                            :editable="false"
                            :clearable="false"
                            @change="changeTime2"
                        />
                    </div>

                    <div class="digi_chart_bar" id="diaiBarChart"></div>

                </div>
            </div>
            <div class="alarm_flex_center">
                <div class="alarm_box_bg">
                    <div class="alarm_title bg_ct2">
                        煤场情况
                    </div>
                    <ul class="digital_qk">
                        <li>
                            <img src="../../assets/img/ico_d1.png" alt="">
                            <p>
                                总存煤量(吨)
                                <strong>{{ bunkersData.coalTotalStored }}</strong>
                            </p>
                        </li>
                        <li>
                            <img src="../../assets/img/ico_d2.png" alt="">
                            <p>
                                今日进煤量(吨)
                                <strong>{{ bunkersData.coalTakenInToday }}</strong>
                            </p>
                        </li>
                        <li>
                            <img src="../../assets/img/ico_d3.png" alt="">
                            <p>
                                今日耗煤量(吨)
                                <strong>{{ bunkersData.coalCostToday }}</strong>
                            </p>
                        </li>
                        <li>
                            <img src="../../assets/img/ico_d4.png" alt="">
                            <p>
                                存煤可用(天)
                                <strong>{{ bunkersData.availableDays }}</strong>
                            </p>
                        </li>
                    </ul>

                    <ul class="digital_qk_info">
                        <li v-for="(item,index) in bunkersData.bunkers" :key="index">
                            <h3>{{ item.name }}</h3>
                            <p>
                                <span>总存煤量(吨)：</span>{{ item.coalTotalStored }}<br />
                                <span>存煤可用(天)：</span>{{ item.availableDays }}<br />
                                <span>今日耗煤量(吨)：</span>{{ item.coalCostToday }}<br />
                                <span>今日进煤量(吨)：</span>{{ item.coalTakenInToday }}<br />
                            </p>
                        </li>
                       
                    </ul>

                </div>
            </div>
            <div class="alarm_flex_right">
                <div class="alarm_box_bg">
                    <div class="alarm_title">
                        设备状态
                    </div>

                    <div class="digital_pie" id="digiPieChart">

                    </div>

                    <table class="alarm_table">
                        <tr>
                            <th>设备名称</th>
                            <th>运行时间</th>
                            <th>运行状态</th>
                        </tr>
                        <tr v-for="(item,index) in deviceStatusData.devices" :key="index">
                            <td>{{ item.name }}</td>
                            <td>{{ item.runTime }}</td>
                            <td>
                                <span v-if="item.status == 'Running'" class="green">{{ item.statusDes }}</span>
                                <span v-if="item.status == 'PowerOff'" class="red">{{ item.statusDes }}</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="alarm_box_bg mt15">
                    <div class="alarm_title">
                        告警提醒
                    </div>
                    <ul class="alarm_reminder">
                        <li v-for="(item,index) in warningsData" :key="index">
                            <div class="title">
                                <h3>{{ item.text }}</h3>
                                <span>{{ item.occurTime }}</span>
                            </div>
                            <p>
                                {{ item.message }}
                            </p>
                            <div class="btn">
                                <a href="javascript:;" @click="ignore(item.id)">忽略</a>
                                <a href="javascript:;" class="hover" @click="handleDialogVisible = true,sId = item.id">处理</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
:deep(.el-input__wrapper) {
    background: rgba(0, 0, 0, 0.4);
    box-shadow:0 0 0 1px #4C70A9 inset;
}
:deep(.el-input__inner) {
    color: #fff;
}



.ico_blue{
    background: #2873E8;
}
.ico_yellow{
    background: #EABA54;
}
.ico_green{
    background: #18D684;
}
.ico_red{
    background: #E73512;
}
.digi_chart_bar{
    width: 100%;
    height: 400px;
}
.digi_title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    h3{
        font-weight: bold;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 20px;
    }
}
.digital_pie{
    width: 100%;
    height: 180px;
}
.digital_qk_info{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-top: 15px;
    li{
        width: 49%;
        padding:15px 20px;
        background: url('../../assets/img/ico_d_bg.png') no-repeat;
        background-size:100% 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        h3{
            flex-shrink: 0;
            width: 42px;
            background: rgba(99, 145, 209, 0.4);
            font-weight: 500;
            font-size: 18px;
            color: #D6E7FF;
            line-height: 36px;
            text-align: center;
            padding:10px 5px;
            margin-right: 30px;
        }
        p{
            width: 100%;
            color:#fff;
            font-weight: bold;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 34px;
            span{
                font-size: 16px;
                color: #B0CCF3;
                line-height: 22px;
            }
        }
    }
}
.digital_qk{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    li{
        display: flex;
        align-items: center;
        background: rgba(1, 24, 58, 0.6);
        padding:10px;
        width: 23.5%;
        p{
            width: 100%;
            color:#fff;
            font-size: 14px;
            line-height: 20px;
            strong{
                display: block;
                font-weight: bold;
                font-size: 22px;
                color: #00F2FE;
                line-height: 22px;
                margin-top: 5px;
            }
        }
        img{
            flex-shrink: 0;
            margin-right: 8px;
        }
    }
}

.alarm_pie{
    width: 100%;
    height: 180px;
}
.alarm_echarts_line{
    width: 100%;
    height: 233px;
}
.alarm_jiqi{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding:0 5px;
    h3{
        font-weight: bold;
        font-size: 18px;
        color: #C3D5F8;
        line-height: 20px;
        padding:5px 0;
        
    }
    .yl{
        li{
            margin-top: 15px;
            background: rgba(36, 79, 162, 0.5);
            color:#fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:18px 25px 18px 15px;
            border-left:3px solid rgba(68, 114, 204, 1);
            img{
                flex-shrink: 0;
                margin-right: 10px;
            }
            p{
                width: 100%;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 20px;
                strong{
                    display: block;
                    font-weight: bold;
                    font-size: 22px;
                    margin-top: 10px;
                }
            }
        }
    }
    .fz{
        ul{
            padding-top: 20px;
        }
        li{
            position: relative;
            margin-top: -10px;
            p{
                position: absolute;
                left:0;
                top:15px;
                right: 0;
                bottom: 0;
                text-align: center;
                font-weight: bold;
                font-size: 16px;
                color: #FFFFFF;
                line-height: 30px;
            }
        }
    }
}
.alarm_envi{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: -10px;
    margin-left: -2%;
    padding-bottom: 5px;
    li{
        width: 23%;
        margin-left: 2%;
        color:#fff;
        background: rgba(3, 17, 32, 0.5);
        border: 1px solid #89AAE5;
        margin-top: 20px;
        h3{
            display: flex;
            align-items: center;
            background: rgba(137, 170, 229, 0.3);
            height: 60px;
            font-size: 18px;
            img{
                margin: 0 20px;
            }
        }
        p{
            border-top: 1px solid #89AAE5;
            height: 66px;
            text-align: center;
            line-height: 66px;
            font-size: 28px;
            font-weight: bold;
            .red{
                color: #E73512;
            }
        }
        &:last-child{
            margin-right: auto;
        }
    }
}
.alarm_reminder{
    padding-bottom: 1px;
    li{
        background: rgba(154, 44, 44, 0.5);
        border-radius: 4px 4px 4px 4px;
        margin-top: 15px;
        padding:0 10px;
        &:first-child{
            margin: 0;
        }
        p{
            font-size: 16px;
            color: #EDDADD;
            line-height: 24px;
            height: 48px;
            box-sizing: border-box;
            margin: 10px 0 0;
            overflow: hidden;
            strong{
                color:#fff;
                font-weight: bold;
            }
        }
        .btn{
            padding:10px 0 15px;
            display: flex;
            align-items: stretch;
            justify-content: flex-end;
            a{
                width: 80px;
                height: 30px;
                background: rgba(190, 152, 158, 0.7);
                line-height: 30px;
                text-align: center;
                margin-left: 10px;
                font-size: 16px;
                color: #2E0C10;
                &.hover{
                    color:#fff;
                    background: rgba(239, 69, 69, 0.7);
                }
            }
        }
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 43px;
            background: url('../../assets/img/ico_c6.png') no-repeat left center;
            position: relative;
            padding-top: 8px;
            h3{
                padding-left:15px;
                font-size: 18px;
                line-height: 30px;
                color:#fff;
            }
            span{
                font-size: 14px;
                color: #F6F9FE;
                line-height: 30px;
            }
        }
    }
}
.alarm_flex_bg{
    background: url('../../assets/img/ico_c_bg.png') no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;

}
.alarm_flex{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    .alarm_flex_left{
        flex-shrink: 0;
        width: 450px;
    }
    .alarm_flex_center{
        width: 100%;
        padding:0 15px;
    }
    .alarm_flex_right{
        flex-shrink: 0;
        width: 400px;
    }
    .alarm_flex_month{
        width: 100%;
        margin-left: 15px;
    }
}
.alarm_box_bg{
    background: rgba(0,0,0,0.6);
    padding:15px;
    position: relative;
    .alarm_title{
        color:#fff;
        width: 100%;
        height: 50px;
        background: url('../../assets/img/ico_ct1.png') no-repeat left top;
        font-size: 22px;
        font-weight: bold;
        padding-left:35px;
        line-height: 30px;
        position: relative;
        ul{
            position: absolute;
            right: 20px;
            top: 6px;
            display: flex;
            align-items: center;
            li{
                display: flex;
                align-items: center;
                margin-left: 40px;
                font-size: 16px;
                line-height: 16px;
                i{
                    flex-shrink: 0;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    margin-right: 8px;
                }
            }
        }
        &.bg_ct2{
            background: url('../../assets/img/ico_ct2.png') no-repeat left top;
        }
        &.bg_ct3{
            background: url('../../assets/img/ico_ct3.png') no-repeat left top;
        }
    }
}
.alarm_table{
    width: 100%;
    color:#fff;
    text-align: left;
}
.alarm_table th{
    font-size: 16px;
    line-height: 22px;
    padding:5px 10px;
}
.alarm_table td{
    font-size: 14px;
    line-height: 22px;
    padding:5px 10px;
    
}
.alarm_table tr:nth-child(3n+2) td{
    background: rgba(0, 0, 0, 0.1);
}
.alarm_table tr:nth-child(3n+3) td{
    background: rgba(0, 0, 0, 0.2);
}
.alarm_table tr:nth-child(3n+4) td{
    background: rgba(0, 0, 0, 0.3);
}
.alarm_table td span{
    font-weight: bold;
    font-size: 15px;
}
.alarm_table td span.green{
    color: #1BEE8D;
}
.alarm_table td span.red{
    color: #ff0000;
}
.alarm_event_num{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 5px;
    strong{
        flex-shrink: 0;
        width: 63px;
        height: 78px;
        color:#fff;
        background: url('../../assets/img/ico_c2.png') no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        line-height: 40px;
    }
    span{
        color:#fff;
        font-size: 15px;
        line-height: 30px;
        padding:0 5px;
    }
}
.alarm_event_info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding:5px 10px 5px;
    li{
        width: 28%;
    }
    span{
        display: flex;
        align-items: center;
        color:#fff;
        font-size: 15px;
        line-height: 20px;
        padding-left: 8px;
        img{
            flex-shrink: 0;
            margin-right: 5px;
        }
    }
    p{
        display: flex;
        align-items: flex-end;
        color:#fff;
        font-size: 14px;
        line-height: 20px;
        margin-top: 10px;
        background: url('../../assets/img/ico_c5.png') no-repeat left bottom;
        padding:0 0 7px 20px;
        strong{
            font-size: 28px;
            line-height: 30px;
            padding-right: 5px;
            font-style: italic;
        }
    }
}
.event_red{
    background: linear-gradient(180deg, #FF5B1A, #FFBCA5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.event_green{
    background: linear-gradient(180deg, #05F7BA, #B0F6E4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.event_blue{
    background: linear-gradient(180deg, #00E4FF, #98EDFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

</style>